import React from 'react';
import { Tabs, Space, Table, Tag,Switch,Button,Modal,App,message } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import './articleclass.css'
import type { TabsProps } from 'antd';

type Props ={}
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
  
}


const sortmanagement = (props:Props) =>{
  const onChangee = (key: string) => {
    console.log(key);
  };



const onChange = (checked: boolean) => {
  console.log(`switch to ${checked}`);
  message.success('状态修改成功');

};



const columns: ColumnsType<DataType> = [

  {
    title: 'ID',
    dataIndex: 'age',
    key: 'age',
    render: (text) => <span>{text}</span>,
  },
  {
    title: '项目名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '栏目别名',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '排序',
    key: 'tags',
    dataIndex: 'tags',

  },
  {
    title: '状态',
    render: (falg: boolean, render: any) => 
    <>
    
    <Switch 
    checkedChildren="正常" 
    unCheckedChildren="禁用" 
    defaultChecked
    onChange={onChange} 
    className="custom-switch"
   
   
  />
 
  
</>

  
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <Button style={{background:"#009688",color:"#fff",display:"block",textAlign:"center",}}>添加子栏目</Button>
       
       
        <Button style={{background:"#1E9FFF",color:"#fff",display:"block",textAlign:"center",}}>编辑</Button>
        <Button style={{background:"#FF5722",color:"#fff",display:"block",textAlign:"center",}}>删除</Button>
      </Space>
    ),
  },
];

const data: DataType[] = [
  {
    key: '1',
    name: '斗罗大陆',
    age: 12,
    address: 'New York No. 1 Lake Park',
    tags: ['255'],
  },
  {
    key: '2',
    name: '梅西',
    age: 9,
    address: 'London No. 1 Lake Park',
    tags: ['255'],
   
  },
  {
    key: '3',
    name: '杰克',
    age: 3,
    address: 'Sydney No. 1 Lake Park',
    tags: ['255'],
  },
  {
    key: '4',
    name: '高哥',
    age: 4,
    address: 'New York No. 1 Lake Park',
    tags: ['255'],
  },
  {
    key: '5',
    name: '中国经济网-房产咨询',
    age: 5,
    address: 'London No. 1 Lake Park',
    tags: ['255'],
   
  },
  {
    key: '6',
    name: '中国经济网-智慧城市',
    age: 6,
    address: 'Sydney No. 1 Lake Park',
    tags: ['255'],
  },
];
const items: TabsProps['items'] = [
  {
    key: '1',
    label: `添加栏目`,
    children:(<>
      
      <div style={{display:"flex"}}>
      {/* <span className="t" style={{background:"#009688",color:"#fff",width:"100px",height:"28px",display:"block",textAlign:"center",}}>添加项目 </span> 
      <span  className="geng" style={{display:"flex",}}>更新缓存</span> */}
      </div>
      <Table bordered={true} columns={columns} dataSource={data} style={{padding:"15px"}} />;
   </> ),
  },
  {
    key: '2',
    label: `更新缓存`,
    children: `Content of Tab Pane 2`,
  },
  
];
  return ( <div>
 <Tabs defaultActiveKey="1" items={items} onChange={onChangee} />;
    </div>)
}

export default sortmanagement;